<template>
  <div class="course-content">
    <el-table :data="contentList" style="width: 100%" @row-click="onContent" class="content-row">
      <el-table-column prop="keshi" label width="200" align="right"></el-table-column>
      <el-table-column width="40" class="course-type">
        <div class="course-type">视频</div>
      </el-table-column>
      <el-table-column prop="title" width="650" label></el-table-column>
      <el-table-column prop="id" width="20" label v-if="idShow"></el-table-column>
      <el-table-column prop="time" width="120" align="right"></el-table-column>
      <el-table-column></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "content",
  props: ["contentList"],
  mounted() {},
  data() {
    return {
      courseData: [],
      data: {},
      idShow: false
    };
  },
  methods: {
    onContent(e) {
      this.$router.push({
        name: "courseware-video",
        params: this.courseData,
        query: { id: e.id }
      });
    }
  }
};
</script>
<style scoped>
.course-type {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid green;
  width: 29px;
  height: 20px;
  font-size: 13px;
  color: green;
}
.course-content {
  height: 560px;
  max-width: 1152px;
  margin: 0 auto;
  background-color: #fff;
  margin-top: 10px;
}
.video-list-line {
  display: flex;
}
.one {
  margin-left: 40px;
}
.two {
  margin-left: 20px;
}
.three {
  float: right;
  margin-right: 200px;
}
ul li {
  font-size: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.content-row {
  cursor: pointer;
}
</style>